import React from 'react'
import RoomModel from "../../../model/room";
import Admin from "../../../layout/Admin";
import {defaultEnd, defaultStart} from "../../user/user-total/user-total";
import {Checkbox, DatePicker, Modal, Popover, Table} from "antd";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import moment from "moment";
import Info from "../../../service/info";
const log = console.log.bind(console)
class Room extends React.Component {
    constructor(props) {
        super(props)
        this.model = new RoomModel()
        this.state = {
            p: 0,
            list: [],
            start: defaultStart,
            end: defaultEnd,
            timeCheck: false,
            count: 0,
            box: null,
            votes: [],
            vote: null,
            voteDetail: [],
            votesP: 0,
            modal: {
                votes: false,
                vote: false,
            }
        }
        this.columns = [
            // Id: 170
            // Boxid: "3526326*170"
            {
                dataIndex: 'Boxid',
                title: '包厢ID',
            },
            // Uid: "d76b03ab-a9a6-46f7-b198-ba411f0652fc"
            {
                dataIndex: 'Uid',
                title: '包厢主人',
            },
            // Createt: 1616990212
            {
                dataIndex: 'Createt',
                title: '创建时间',
                render: (time) => moment(new Date(time * 1000)).format('YYYY-MM-DD HH:mmm')
            },
            // Name: "哦婆婆破"
            {
                dataIndex: 'Name',
                title: '包厢名',
            },
            // Pwd: ""
            {
                dataIndex: 'Pwd',
                title: '密码',
                render: (text) => text.length > 0 ? <Popover trigger='click'
                                                              title='密码'
                                                              content={text}
                >
                    <a>查看</a>
                </Popover> : '无密码'
            },
            // Notice: ""
            {
                dataIndex: 'Notice',
                title: '公告',
                render: (text) => text.length > 0 ? <Popover trigger='click'
                                           title='公告'
                                           content={text}
                >
                    <a>查看</a>
                </Popover> : '无公告'
            },
            // Namiid: 3526326
            {
                dataIndex: 'Namiid',
                title: '比赛ID',
            },
            // State: 1
            {
                dataIndex: 'State',
                title: '包厢状态',
                render: (state) => state === 1 ? '正常' : '关闭',
            },
            // Usercount: 1
            {
                dataIndex: 'Usercount',
                title: '加入人数',
            },
            // Votecount: 1
            {
                dataIndex: 'Votecount',
                title: '投票数',
            },
            // Historyjoin: null
            {
                dataIndex: 'Historyjoin',
                title: '历史加入',
                render: (array) => {
                    if (array) {
                        return <Popover trigger='click'
                                        title='参与人'
                                        content={array.map(uid => <p key={uid}>{uid}</p>)}
                        >
                            <a>查看</a>
                        </Popover>
                    } else {
                        return <p>无用户</p>
                    }
                }
            },
            {
                title: '获取投票',
                render: (record) => {
                    return <a onClick={() => {
                        this.setState({
                            box: record,
                        }, () => this.votes())
                    }}>包厢投票</a>
                }
            }
        ]
        this.votesColumns = [
            // Boxid: "3526440*183"
            // Createt: 1617094529
            // Expire: 30
            // Iconurl: "https://youtoball.oss-cn-shenzhen.aliyuncs.com/avatar/c95f7de8-4d02-4395-b351-705a7b8a420e.jpg"
            // Id: 119
            // List: null
            // Namiid: 3526440
            // Nickname: "啊啊啊"
            // Option: (2) [{…}, {…}]
            // Optioncount: 2
            // Timenow: 1617245450
            // Title: "叔叔"
            // Uid: "c95f7de
            {
                dataIndex: 'Nickname',
                title: '房主',
            },
            {
                dataIndex: 'Title',
                title: '投票标题',
            },
            {
                dataIndex: 'Createt',
                title: '创建时间',
                render: (time) => moment(new Date(time * 1000)).format('YYYY-MM-DD HH:mm')
            },
            {
                dataIndex: 'Expire',
                title: '时效',
            },
            {
                dataIndex: 'Option',
                title: '选项',
                render: (option) => {
                    return <div>
                        {option.map((o, index) => <p key={index}>{o.Value}: {o.Count}</p>)}
                    </div>
                }
            },
            {
                title: '操作',
                render: (record) => {
                    return <div className='action-links'>
                        <a onClick={() => {
                            this.delete(record)
                        }}>删除</a>
                        <a onClick={() => {
                            this.setState({
                                vote: record,
                            }, () => this.vote())
                        }}>查看</a>
                    </div>
                }
            }
            // {
            //     dataIndex: 'List',
            //     title: 'List',
            // },
        ]
        this.voteDetailColumns = [
            // Createt: 1617094545
            {
                dataIndex: 'Createt',
                title: '投票时间',
                render: (time) => moment(new Date(time * 1000)).format('YYYY-MM-DD HH:mm')
            },
            // Id: 57
            // Namiid: 3526440
            // Nickname: "啊啊啊"
            {
                dataIndex: 'Nickname',
                title: '投票人昵称',
            },
            {
                dataIndex: 'Uid',
                title: '投票人Uid',
            },
            // Option: "小姐姐"
            {
                dataIndex: 'Option',
                title: '选项',
            },
            {
                dataIndex: 'Txt',
                title: '说明',
            },
            // Optionindex: 1
            // Txt: ""
            // Uid: "c95f7de8-4d02-4395-b351-705a7b8a420e"
            // Voteid: 119

        ]
    }

    componentDidMount() {
        this.all()
    }

    all = () => {
        const params = {
            P: this.state.p,
        }
        if (this.state.timeCheck) {
            // 2006-01-02 15:04:05
            const start = parseInt(this.state.start.format('X'))
            const end = parseInt(this.state.end.format('X'))
            params.Startt = start
            params.Endt = end
        }
        this.model
            .all(params)
            .then(res => {
                const data = res.data.ok
                if (data) {
                    this.setState({
                        list: data,
                        count: res.data.count,
                    })
                }
            })
    }

    count = () => {
        const params = {}
        const start = parseInt(this.state.start.format('X'))
        const end = parseInt(this.state.end.format('X'))
        params.Startt = start
        params.Endt = end
        this.model
            .count(params)
            .then(res => {
                const data = res.data.count
                this.setState({
                    count: data,
                })
            })
    }

    vote = () => {
        // log(record)
        const record = this.state.vote
        const params = {
            Voteid: record.Id,
        }
        this.callModal('vote')
        this.model
            .vote(params)
            .then(res => {
                const data = res.data.ok
                log(data)
                this.setState({
                    voteDetail: data,
                })
            })
    }

    delete = (record) => {
        log(record)
        const params = {
            Voteid: record.Id,
        }
        this.model
            .delete(params)
            .then(res => {
                const data = res.data.ok
                if (data) {
                    Info.success('删除成功')
                    this.votes()
                }
            })
    }

    votes = () => {
        // log(record)
        const record = this.state.box
        const params = {
            Boxid: record.Boxid,
            P: this.state.votesP,
        }
        this.callModal('votes')
        this.model
            .votes(params)
            .then(res => {
                const data = res.data.ok
                log(data)
                this.setState({
                    votes: data,
                })
            })
    }

    onDateChange = (value,) => {
        const [start, end,] = value
        this.setState({
            start,
            end,
        }, () => {
            // this.get()
            this.all()
            this.count()
        })
    }

    callModal(key, callback) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    prevVotesPage = () => {
        this.setState({
            votesP: this.state.votesP - 1,
        }, () => this.votes())
    }

    nextVotesPage = () => {
        this.setState({
            votesP: this.state.votesP + 1,
        }, () => this.votes())
    }

    render() {
        return <>
            <Modal
                visible={this.state.modal.vote}
                onCancel={() => this.cancelModal('vote')}
                width={'70%'}
            >
                <Table
                    dataSource={this.state.voteDetail}
                    columns={this.voteDetailColumns}
                    pagination={false}
                    rowKey={(record, index) => index}
                />
            </Modal>
            <Modal
                visible={this.state.modal.votes}
                onCancel={() => this.cancelModal('votes')}
                width={'80%'}
            >
                <Table
                    dataSource={this.state.votes}
                    columns={this.votesColumns}
                    pagination={false}
                    rowKey={(record, index) => index}
                />
                <PaginationFooter
                    pageIndex={this.state.votesP}
                    prevPage={this.prevVotesPage}
                    nextPage={this.nextVotesPage}
                />
            </Modal>
            <Admin>
                <div className='list-container'>
                    <div
                        style={{marginBottom: '8px',}}
                    >
                        <Checkbox
                            checked={this.state.timeCheck}
                            onChange={() => {
                                this.setState({
                                    timeCheck: !this.state.timeCheck,
                                }, () => {
                                    this.all()
                                    if (this.state.timeCheck) {
                                        this.count()
                                    }
                                })
                            }}
                        >
                            时间:
                        </Checkbox>
                        <DatePicker.RangePicker
                            showTime={{ format: 'HH:mm:ss' }}
                            format="YYYY-MM-DD HH:mm:ss"
                            onChange={this.onDateChange}
                            defaultValue={[
                                this.state.start,
                                this.state.end,
                            ]}
                            disabled={this.state.timeCheck === false}
                        />
                        <p>总数：{this.state.count}（勾选查询时间可以查询区间总数）</p>
                    </div>
                    <Table
                        dataSource={this.state.list}
                        columns={this.columns}
                        pagination={false}
                        rowKey={(record, index) => index}
                    />
                    <PaginationFooter
                        pageIndex={this.state.p}
                        prevPage={this.prevPage}
                        nextPage={this.nextPage}
                    />
                </div>
            </Admin>
        </>
    }

}

export default Room